<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				background-color: cornsilk;
			}

			table {
				text-align: center;
				border: 1px solid #ccc;
				width: 800px;
				margin: 10% auto;
			}

			table caption {
				font-size: 24px;
				padding: 10px;
			}

			table thead th {
				background-color: #CCCCCC;
			}

			label.count,
			label.money {
				padding: 0 5px;
				color: red;
				font-weight: bolder;
			}
		</style>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
			全选/全不选                 15'
			删除当前行（要有提示）       15'
			数据行复选框                10'
			*/
			
			/* 在这里填写jquery代码，禁止修改html代码 */
			$(function(){
				$("#chkAll").change(function(){
					$(":checkbox:not([id])").each(function (index,item) {
					   var ck= $(item).prop("checked");
						$(item).prop("checked",!ck);
					})
				})
				$("#chkAll").change(function(){
					var che=$(this).prop("checked");
					$(":checkbox:not([id])").prop("checked",che);
				})
			})
			$(function(){
				$(":button").click(function(){
					var del =$(this).data("del");
					if(confirm("你确定要删除编号为"+del+"的商品?")){
						$(this).closest("tr").css("display","none");
					}
				})
			})
			
			$(function(){
				$("tr input").click(function(){
					var val=$(".count").val();
					var price=parseInt($(".money").text());
					$(".money").html(val*price);
				})
			})
		</script>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0">
			<caption>购物车商品管理</caption>
			<thead>
				<tr>
					<th>
						<input type="checkbox" id="chkAll" />
						<label for="chkAll">全选</label>
					</th>
					<th>产品编号</th>
					<th>产品名称</th>
					<th>产品单价</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" /></td>
					<td>1001</td>
					<td>Redmi 笔记本 15寸</td>
					<td>5999</td>
					<td><button type="button" data-del="1001">删除</button></td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>1003</td>
					<td>华为平板2</td>
					<td>2999</td>
					<td><button type="button" data-del="1003">删除</button></td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>1004</td>
					<td>华为笔记本电脑</td>
					<td>6888</td>
					<td><button type="button" data-del="1004">删除</button></td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>1005</td>
					<td>小米10青春版</td>
					<td>1299</td>
					<td><button type="button" data-del="1005">删除</button></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="5" style="text-align: right;">您已选购<label class="count">0</label>件，合计<label
							class="money">0</label>元</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>
